<template>
  <div class="card">
    <div class="shop-box sa-flex sa-col-center">
      <div class="shop-info sa-flex sa-col-center">
        <el-image class="shop-info-img" :src="props.data.info && checkUrl(props.data.info.thumb)" fit="cover" />
        <div class="shop-info-text">
          <div class="shop-info-text-item sa-flex sa-col-center">
            <img :src="'./static/images/seller/seller-shop.png'" alt="">
            <div class="shop-info-text-item-name">店铺名称：{{ props.data.info && props.data?.info.name }}</div>
          </div>
          <div class="shop-info-text-item sa-flex sa-col-center">
            <img :src="'./static/images/seller/seller-level.png'" alt="">
            <div class="shop-info-text-item-name">店铺等级：
              <span v-if="props.data.info && props.data.info.level === 'gold'">金牌卖家</span>
              <span v-if="props.data.info && props.data.info.level === 'silver'">银牌卖家</span>
              <span v-if="props.data.info && props.data.info.level === 'bronze'">铜牌卖家</span>
            </div>
          </div>
          <!-- <div class="shop-info-text-item sa-flex sa-col-center">
            <img :src="'./static/images/seller/seller-aptitude.png'" alt="">
            <div class="shop-info-text-item-tips">
              <span v-if="props.data.status && props.data.status[statusMap[props.index]]">店铺资质已补充</span>
              <span v-else>店铺资质未完善</span>
            </div>
            <el-button type="primary" size="small"
                       v-if="props.data.status && props.data.status[statusMap[props.index]]">查看/修改
            </el-button>
            <el-button type="primary" size="small" v-else>去完善</el-button>
          </div> -->
        </div>
      </div>
      <div class="sa-p-r-40" style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
        <div class="shop-score sa-flex">
          <div class="shop-score-item shop-score-active sa-col-center sa-row-between sa-flex-col">
            <div class="title">综合评分</div>
            <div class="score">5.0</div>
            <div class="level">高</div>
          </div>
          <div class="shop-score-item sa-col-center sa-row-between sa-flex-col">
            <div class="title">商品评分</div>
            <div class="score">5.0</div>
            <div class="level">高</div>
          </div>
          <div class="shop-score-item sa-col-center sa-row-between sa-flex-col">
            <div class="title">服务评分</div>
            <div class="score">5.0</div>
            <div class="level">高</div>
          </div>
          <div class="shop-score-item sa-col-center sa-row-between sa-flex-col">
            <div class="title">物流评分</div>
            <div class="score">5.0</div>
            <div class="level">高</div>
          </div>
        </div>
        <div class="role sa-flex">
          <!--电商已申请-已选中-->
          <img class="img-1"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/select-e-commerce.png" alt=""
               v-show="props.data.status && props.data.status.local_life && props.index === 1" />
          <!--电商已申请-未选中-->
          <img class="img-1"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/e-commerce.png" alt=""
               v-show="props.data.status && props.data.status.local_life && props.index !== 1" @click="onChange(1)" />
          <!--电商未申请-->
          <img class="img-1"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/not-apply-e-commerce.png" alt=""
               v-show="props.data.status && !props.data.status.local_life" />
          <!--团购已申请-已选中-->
          <img class="img-2"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/select-group-buying.png" alt=""
               v-show="props.data.status && props.data.status.ecommerce && props.index === 2" />
          <!--团购已申请-未选中-->
          <img class="img-2"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/group-buying.png" alt=""
               v-show="props.data.status && props.data.status.ecommerce && props.index !== 2" @click="onChange(2)" />
          <!--团购未申请-->
          <img class="img-2"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/not-apply-group-buying.png" alt=""
               v-show="props.data.status && !props.data.status.ecommerce" />
               
          <img class="img-2" src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/not-apply-takeaway.png" alt="" />
        <!--供应链未选中-->
        <img class="img-2"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/group-buying.png" alt=""
               v-show="props.data.status && props.data.status.supplier" @click="onChange(4)" />
          <!--供应链选中-->
          <img class="img-2"
               src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/not-apply-group-buying.png" alt=""
               v-show="props.data.status && !props.data.status.supplier" />
      
        
        </div>
      </div>
    </div>
    <!-- <div style="padding-left: 154px">
      <el-button type="primary" size="small" @click="open">店铺二维码</el-button>
      <div class="btn-tips">
        提示：店铺人员可登录“萌宠霸王”小程序，进入首页使用扫码功能，扫店铺二维码绑定店铺，绑定店铺后可在萌宠霸王核销用户订单；
      </div>
    </div> -->
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import qrcode from './qrcode.vue';
  import { useModal } from '@/sheep/hooks';

  const emit = defineEmits(['changeRole']);
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
    },
  });

  const statusMap = {
    2: 'local_life_status',
    1: 'ecommerce_status',
    3: 'takeaway',
    4:'supplier',//props传4进入看供应链
  };

  const onChange = (index) => {
    emit('changeRole', index);
  };

  const open = () => {
    useModal(
      qrcode,
      {
        title: '二维码',
        type: 'details',
      },
      {},
    );
  };
</script>

<style lang="scss" scoped>
  .card {
    padding: 0 5px 0 var(--sa-padding);

    &:hover {
      transition: all 0.2s;
      transform: scale(1.02);
    }

    .shop-box {
      height: 150px;
      padding-left: 34px;

      .shop-info {
        height: 100px;

        .shop-info-img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: #FFFFFF;
          box-shadow: 0 0 10px 0 rgba(128, 107, 245, 0.3);
          margin-right: 20px;
        }

        .shop-info-text {
          height: 100px;
          padding-top: 6px;

          .shop-info-text-item {
            margin-bottom: 6px;

            img {
              width: 25px;
              height: 25px;
              margin-right: 2px;
            }

            .shop-info-text-item-name {
              font-family: 'Source Han Sans CN';
              font-size: 18px;
              font-weight: 500;
              color: #3D3D3D;

              span {
                font-family: 'Source Han Sans CN';
              }
            }

            .shop-info-text-item-tips {
              height: 25px;
              line-height: 25px;
              font-family: 'Source Han Sans CN';
              font-size: 14px;
              font-weight: 500;
              color: #806BF5;
              margin-right: 12px;
            }
          }
        }
      }

      .shop-score {
        width: 280px;
        height: 80px;
        border-radius: 5px;
        background: linear-gradient(180deg, #E1E4FF 0%, rgba(255, 255, 255, 0.91) 50%, #E1E4FF 100%);
        margin-left: 40px;

        .shop-score-item {
          width: 70px;
          height: 80px;
          border-radius: 5px;
          padding: 10px 0;
          font-family: 'PingFangSC-Regular, sans-serif';
          color: #806AF6;

          .title {
            font-size: 10px;
            text-align: center;
          }

          .score {
            font-size: 16px;
            font-weight: 600;
            text-align: center;
          }

          .level {
            font-size: 11px;
            text-align: center;
          }
        }
      }

      .role {
        img {
          width: 150px;
          height: 150px;
        }
      }
    }
  }

  .shop-score-active {
    color: #FFFFFF !important;
    background: #806AF6 !important;
  }

  .img-1 {
    margin-right: -40px;
    position: relative;
    z-index: 99;
  }

  .img-2 {
    margin-right: -40px;
    position: relative;
    z-index: 98;
  }

  .btn-tips {
    color: #999999;
    font-size: 12px;
    margin-top: 10px;
    padding-bottom: 10px;
  }
</style>
